<ng-content></ng-content>

<lv-popover
  #popover
  [lvHeader]="headerTemplate"
  [lvContent]="colorPickerTemplate"
  [lvFooter]="footerTemplate"
  [lvTheme]="'light'"
  [lvTrigger]="'click'"
  [lvPosition]="'bottomLeft'"
  [lvScrollToClose]="lvScrollToClose"
  [lvShowArrow]="lvShowArrow"
  [lvAnimationType]="lvAnimationType"
  [lvOrigin]="originEle"
  [lvClassName]="lvClassName"
  [lvAfterOpen]="show"
>
</lv-popover>

<ng-template #headerTemplate>
  <ng-container *ngIf="typeUtils.isRealString(lvHeader)">{{ lvHeader }}</ng-container>
  <ng-container *ngIf="typeUtils.isTemplateRef(lvHeader)">
    <ng-container *ngTemplateOutlet="lvHeader"></ng-container>
  </ng-container>
</ng-template>

<ng-template #colorPickerTemplate>
  <div #colorPalette class="lv-color-picker-palette" (mousedown)="onColorMousedown($event)">
    <div class="lv-color-picker-palette-mask">
      <div class="lv-color-picker-palette-mask-white"></div>
      <div class="lv-color-picker-palette-mask-black"></div>
    </div>
    <div class="lv-color-picker-color">
      <div #colorHandle class="lv-color-picker-color-handle"></div>
    </div>
  </div>

  <div #hue class="lv-color-picker-hue" (mousedown)="onHueMousedown($event)">
    <div class="lv-color-picker-hue-mask"></div>
    <div #hueHandle class="lv-color-picker-hue-handle"></div>
  </div>

  <input
    *ngIf="lvShowColorText"
    class="lv-color-picker-text"
    name="color"
    [lvPasteAllowed]="lvPasteAllowed"
    [(ngModel)]="inputColorValue"
    (ngModelChange)="inputChange($event)"
    lv-input
  />
</ng-template>

<ng-template #footerTemplate>
  <ng-container *ngIf="lvFooter">
    <ng-container *ngIf="typeUtils.isRealString(lvFooter)">{{ lvFooter }}</ng-container>
    <ng-container *ngIf="typeUtils.isTemplateRef(lvFooter)">
      <ng-container *ngTemplateOutlet="lvFooter"></ng-container>
    </ng-container>
  </ng-container>
</ng-template>
